<template>
  <div :class="$style.treeWap">
   <div :class="$style.selectBox">
            <label>请选择：</label>
            <select-page
              :list="groupList"
              :listLoading="groupLoading"
              :nameProp="'name'"
              :params="group"
              :other="false"
              :total="totalGroup"
              placeholder="站点"
              @getList="getGroup"
              @onChangeOrganizeValue="changeGroupInput"
              @onChangeClear="clearData"
              @onEnterValue="enterValueGroup">
            </select-page>
            <select-page
              :list="seconedList"
              :listLoading="seconedLoading"
              :nameProp="'name'"
              :params="seconed"
              :other="false"
              :total="totalSeconed"
              placeholder="桩"
              @getList="getSeconed"
              @onChangeOrganizeValue="changeSeconedInput"
              @onChangeClear="clearData"
              @onEnterValue="enterValueSeconed">
            </select-page>
            <select-page
              :list="groupList"
              :listLoading="groupLoading"
              :nameProp="'name'"
              :params="group"
              :other="false"
              :total="totalGroup"
              placeholder="站点"
              @getList="getGroup"
              @onChangeOrganizeValue="changeGroupInput"
              @onChangeClear="clearData"
              @onEnterValue="enterValueGroup">
            </select-page>
       </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import SelectPage from '@/components/SelectPage';
export default {
  name: "zhandian",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    SelectPage
  },
  data() {
    return {
      groupId: '',
      ruleId: '',
      groupList: [],
      groupLoading: false,
      group: {
        pageNum: 1,
        pageSize: 10,
        showTotal: true,
        total: 0,
        condition: "",  // 输入框儿输入申请符合条件的数据
      },
      totalGroup: 0,

      seconedList: [],
      seconedLoading: false,
      seconed: {
        pageNum: 1,
        pageSize: 10,
        showTotal: true,
        total: 0,
        condition: "",  // 输入框儿输入申请符合条件的数据
      },
      totalSeconed: 0,

      siteList: [],
      pileList: [],
      gunList: [],
      tableData: [],
      Company: '',
      RateList: '',
      query: {
        page: 1
      },
       pager: {
        component: 'thirdRate',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      brandList:[{id:'',name:'请选择'}],
    };
  },
  created() {
    this.getRate()
  },
  mounted(){
    this.getGroup()
    this.iotSite()
  },
  methods: {
     searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs.component == 'thirdRate'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager.component == 'thirdRate'){
        this.pager = pager
      }
    },
    async getRate() {
        let siteId = this.searchs.siteId
        let pileId = this.searchs.pileId
        let gunId = this.searchs.gunId
        let groupId = this.groupId
        let page = this.pager.current
        let search = objectFilter({siteId, groupId, pileId, page, gunId})
        const res = await request({
            url: "/group/iot/nat/guns",
            method: "POST",
            data: search
        });
        this.tableData = res.page.list
        this.pager.total = res.page.totalCount
        this.pager.current = res.page.currPage
      
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    async changeSite(clear){
      let url = '/iot/pile/select'
      let datas = {siteId:this.searchs.siteId}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      this.pileList = res.list
      if(clear){
        // 选择
         this.searchs.gunId = ''
         this.searchs.pileId = ''
      }else{
        //回退
        if(this.searchs.pileId){
          this.changePile(0)
          return false
        }
      }
      this.getRate()
    },
    async changePile(clear){
      let url = '/iot/pile/gun/all'
      let datas = {pile:this.searchs.pileId}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
       this.gunList = res.list
      if(clear){
        this.searchs.gunId = ''
      }else{
        if(this.searchs.gunId){
          this.changeGun()
          return
        }
      }
      this.getRate()
    },
    //站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/all",
      method: "POST",
      data: {}
      });
       this.siteList = list
    },
    editStore(row){
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      this.$router.push({ path: "/media/gun/info",query:{id:row.id,groupId:row.groupId,ruleId:row.gunId} })
    },
    commentDetail(id){
      this.$router.push({ path: "/storeDetail",query:{id:id,type: "toview"} })
    },

    //分页选择-分组
     async getGroup() {
      this.groupLoading = true;
      let name = this.group.condition 
      let page = this.group.pageNum
      let search = objectFilter({ name,page })
      let data = await request({
        url: "/iot/site/all",
        method: "POST",
        data: search
      });
      if(data.code ==0){
          this.groupList = data.list.list;
          this.totalGroup = data.list.totalCount;
          this.groupLoading = false;
      }else{
          this.$message("暂无数据");
          this.groupList = [];
          this.totalGroup = 0;
          this.groupLoading = false;
      }
      this.show = true
    },
    changeGroupInput(value) {
      if (value == "") { 
        // 如果输入框儿为空则清空之前选中机构后赋值的参数
        this.group.condition = "";
        this.getGroup();
      } else {
        // 赋值
        this.group.condition = value;
        this.getGroup();
      }
    },
    enterValueGroup(val){
      this.groupId = val
      this.getRate()
    },
    clearData(){
      this.groupId = ''
      this.getRate()
    },
    
   
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let del = await request({
        url: "/rate/third/map/delete",
        method: "POST",
        dataType4:'json',
        data: [id]
      });
      if(del.code !==0) return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getRate()
      })
    },
  }
}
</script>
<style lang='scss' module>
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .selectBox {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

</style>